<template>
  <div>
    <el-form class="box" :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="ruleForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input v-model="ruleForm.passWord"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >登陆</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { Login } from "../units/api.js";
export default {
  data() {
    return {
      ruleForm: {
        userName: "",
        passWord: "",
      },
      rules: {
        // name: [
        //   { required: true, message: "请输入活动名称", trigger: "blur" },
        //   { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        // ],
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        passWord: [
          { required: true, message: "请请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // submitForm(formName) {
    //   this.$refs[formName].validate(async (valid) => {
    //     if (valid) {
    //       let res = await this.$axios.post(
    //         "/login",
    //         this.ruleForm
    //       );
    //       console.log(res);
    //       if (res.data.code == 200) {
    //         localStorage.setItem("token", res.data.data.token);
    //         this.$store.commit("SET_USER", res.data.data.userName);
    //         this.$message({
    //           message: res.data.msg,
    //           type: "success",
    //         });
    //         this.$router.replace("/home");
    //       } else {
    //         this.$message({
    //           message: res.data.msg,
    //           type: "error",
    //         });
    //       }

    //       // -----------------------------------------------------
    //       //   this.$axios
    //       //     .post("http://wish.byesame.com/login", this.ruleForm)
    //       //     .then((res) => {
    //       //       console.log(res);
    //       //       if (res.data.code == 200) {
    //       //         // 保存一下 身份令牌 token
    //       //         localStorage.setItem("token",res.data.data.token)
    //       //         this.$store.commit("SET_USER",res.data.data.userName)
    //       //         this.$message({
    //       //           message: res.data.msg,
    //       //           type: "success",
    //       //         });
    //       //         this.$router.replace('/home')
    //       //       }else{
    //       //          this.$message({
    //       //           message: res.data.msg,
    //       //           type: "error",
    //       //         });
    //       //       }
    //       //     });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await Login(this.ruleForm);
          if (res.data.code == 200) {
            localStorage.setItem("token", res.data.data.token);
            this.$store.commit("SET_USER", res.data.data.userName);
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.$router.replace("/home");
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style scoped>
.box {
  width: 350px;
  margin: 180px auto;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  padding: 35px 35px 15px;
  box-shadow: 0 0 25px #909399;
}
</style>